<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: red;
            border-radius: 50%;
            left: 0;
            top: 0;
        }
        .box img{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
   <div class="box">
       <img src="./img/index.png" >
   </div>

    <script>
        // 拖拽写法思路：
        // 1：鼠标按下位置：距离拖拽物体左上角距离始终不变，获取鼠标距离物体的距离=  鼠标距离浏览器页面的距离 - 物体距离页面的距离 
        
        // 2：物体移动时 物体的移动距离 = 鼠标距离浏览器页面的距离 - 鼠标距离物体的距离

        // 3：鼠标抬起的时候 把鼠标的移动事件及抬起事件清空。

        var  oDiv = document.querySelector(".box")

        // 1. 鼠标按下，求鼠标按下的位置距离拖拽物体的左边距离和上边距离
        oDiv.onmousedown = function(ev){
            // 1：鼠标距离浏览器页面的距离
            let mouseX = ev.clientX;
            let mouseY = ev.clientY;

            // 2. 获取物体距离页面的距离
            let x = oDiv.offsetLeft;
            let y = oDiv.offsetTop



            // 3:鼠标距离物体的距离
            let disX = mouseX - x;
            let disY = mouseY - y;
 
            // 2:鼠标按下移动时候  求物体的移动距离
            oDiv.onmousemove = function(ev){
                oDiv.style.left = ev.clientX - disX + "px"
                oDiv.style.top  = ev.clientY - disY +  "px"
            }

            // 3:鼠标抬起的时候 把鼠标的移动事件及抬起事件清空。
           oDiv.onmouseup = function(ev){
             document.onmousemove = null
             document.onmousedown = null
           }
        
           return false
     }


    </script>
</body>
</html>